<template>
  <Card>
    <div class="searchBox">
      <Form
        id="searchForm"
        ref="searchForm"
        :label-width="70"
        :model="searchForm"
        class="search-form"
        inline>
        <Form-item label="姓名：" prop="name">
          <Input
            v-model="searchForm.name"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item style="margin-left:-70px;">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div id="generate" class="btns">
      <Button icon="ios-add" target="_self" type="primary" @click="toAdd">添加</Button>
      <upload-file ref="uploadCashFile" button-name="导入" @on-change="uploadData($event)"></upload-file>
      <Button icon="md-cloud-download" type="primary" @click="exportPersonnel">导出</Button>
      <Button icon="md-trash" type="error" @click="delAll">删除</Button>
    </div>
    <div class="table">
      <!-- <Row>
        <Alert show-icon>
          已选择
          <span class="select-count">{{ selectCount }}</span> 项
          <a @click="clearSelectAll" class="select-clear">清空</a>
        </Alert>
      </Row>
      <Row>
        <Table
          :columns="columns"
          :data="data"
          :loading="loading"
          @on-selection-change="showSelect"
          border
          ref="table"
          size="small"
          :height="height"
        >
          <template slot="action" slot-scope="{ row }">
            <a @click="preview(row)" class="edit" style="color:#2d8cf0;font-size: 12px;">查看</a>
            <Divider type="vertical" />
            <a @click="edit(row)" class="edit" style="color:#2d8cf0;font-size: 12px;">编辑</a>
            <Divider type="vertical" />
            <a @click="del(row)" class="del" style="color:#ed4014;font-size: 12px;">删除</a>
          </template>
        </Table>
      </Row> -->
      <!-- <Row class="page" justify="end" type="flex">
        <Page
          :current="searchForm.pageNumber"
          :page-size="searchForm.pageSize"
          :total="total"
          @on-change="changePage"
          show-total
        />
      </Row> -->
      <vxe-table
        ref="xTable"
        :data="data"
        :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
        :height="height"
        :loading="loading"
        align="center"
        border
        highlight-cell
        keep-source
        resizable
        show-footer
        show-overflow
        size="mini"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-table-column fixed="left" type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column fixed="left" type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="name" fixed="left" sortable title="姓名" width="150"></vxe-table-column>
        <vxe-table-column field="sex" sortable title="性别" width="150"></vxe-table-column>
        <vxe-table-column field="line_num" sortable title="线路" width="100"></vxe-table-column>
        <!-- <vxe-table-column field="IDCard" title="身份证号码" sortable width="200" ></vxe-table-column> -->
        <vxe-table-column field="age" sortable title="年龄" width="200"></vxe-table-column>
        <!-- <vxe-table-column field="birthday" title="生日" sortable width="200"></vxe-table-column> -->
        <!-- <vxe-table-column field="phone" title="联系电话" sortable width="200"></vxe-table-column> -->
        <vxe-table-column field="join_at" sortable title="入职时间" width="200"></vxe-table-column>
        <vxe-table-column
          :formatter="formatterStatus"
          field="status"
          sortable
          title="状态"
          width="200"></vxe-table-column>
        <vxe-table-column field="created_at" sortable title="创建时间" width="200"></vxe-table-column>
        <vxe-table-column fixed="right" show-overflow title="操作" width="200">
          <template v-slot="{ row }">
            <vxe-button icon="fa fa-edit" style="color:#2d8cf0;font-size: 12px;" type="text" @click="preview(row)">查看
            </vxe-button>
            <vxe-button icon="fa fa-edit" style="color:#2d8cf0;font-size: 12px;" type="text" @click="edit(row)">编辑
            </vxe-button>
            <vxe-button icon="fa fa-trash-o" style="color:#ed4014;font-size: 12px;" type="text" @click="del(row)">删除
            </vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>
<script>
import './driver.css'
import {destroy, importDriver, personnelList} from '../../../api/personnel'
import UploadFile from '../../my-components/upload-file'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      height: 450,
      modal: false,
      importLoading: false,
      total: 0,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        name: '',
        type: 1,
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      data: [],
      statusList: [
        {label: '在职', value: '0'},
        {label: '离职', value: '1'}
      ]
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'driver') {
        this.handleReset()
      }
    }
  },
  mounted() {
    this.init()
    const body_h = document.body.clientHeight
    const form_h = document.getElementById('searchForm').offsetHeight
    const row_h = document.getElementById('generate').offsetHeight
    this.height = body_h - form_h - row_h - 200
  },
  methods: {
    // changePage(v) {
    //   this.searchForm.pageNumber = v
    //   this.getPersonnelList()
    //   this.clearSelectAll()
    // },
    // clearSelectAll() {
    //   this.$refs.table.selectAll(false)
    // },
    formatterStatus({cellValue}) {
      return this.statusList[cellValue].label
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          destroy(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getPersonnelList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          destroy(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getPersonnelList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.$router.push({
        name: 'editDriver',
        params: {
          id: row.id
        }
      })
    },
    preview(row) {
      this.$router.push({
        name: 'previewDriver',
        params: {
          id: row.id
        }
      })
    },
    getPersonnelList() {
      const id = this.$route.params.id
      const param_type = this.$route.params.param_type
      if (param_type == 'edit') {
        personnelList(this.searchForm).then(res => {
          if (res.data) {
            this.data = res.data.personnel
          }
        })

      } else {
        this.loading = true
        // this.clearSelectAll()
        personnelList(this.searchForm).then(res => {
          this.loading = false
          if (res.data) {
            this.data = res.data.personnel
            // this.total = res.data.count
          }
        })
      }
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      // this.searchForm.pageNumber = 1
      // this.searchForm.pageSize = 10
      // 重新加载数据
      this.getPersonnelList()
    },
    handleSearch() {
      // this.searchForm.pageNumber = 1
      // this.searchForm.pageSize = 10
      this.getPersonnelList()
    },
    init() {
      this.getPersonnelList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    toAdd() {
      this.$router.push({
        name: 'addDriver'
      })
    },
    selectChangeEvent({checked, records}) {
      this.selectList = records
      this.selectCount = records.length
    },
    uploadData(event, cardType) {
      this.modal = true
      this.importLoading = true
      importDriver({url: event.url}).then(res => {
        if (res.data) {
          this.$Message.success(res.message)
          this.getPersonnelList()
        } else {
          this.$Message.error(res.message)
        }
        this.modal = false
        this.importLoading = false
      })
    },
    exportPersonnel() {
      window.location.href =
        '/api/exportDriverPersonnel?name=' +
        this.searchForm.name +
        '&type=1'
    }
  }
}
</script>
